// 维护统计
<template>
  <div class="maintain">
    <comTitle class="flex">
      <template #title> 维护统计 </template>
    </comTitle>
    <div class="echarts">
      <statisticsTableHeader class="mb-10"></statisticsTableHeader>
      <scroll class="econtent">
        <div class="item1">
          <div class="title">异常维修</div>
          <div class="item1child">
            <div class="child mr-24 ml-24">
              <charts :option="mainChart" />
            </div>
            <div class="child mr-24 flex-colomn">
              <div class="childTitle fs-16 cr-hui3">故障设备位置分布</div>
              <div class="center_chart">
                <echartData
                  class="maintain1"
                  :wasteTypewuran="wasteTypewuran"
                  :sum="sum"
                  :width="100"
                  :height="100"
                ></echartData>
              </div>
              <div class="data-end-right">
                <div
                  class="flex mb-10 status"
                  v-for="item in scaleData.slice(0, 3)"
                  :key="item.name"
                >
                  <div class="flex-start">
                    <div
                      class="spotBig"
                      :style="{
                        'background-color': item.bg,
                      }"
                    >
                      <div
                        :class="`spot`"
                        :style="{
                          'background-color': item.color,
                        }"
                      ></div>
                    </div>
                    <span class="fs-12 cr-hui3 ml-4">{{ item.name }}</span>
                  </div>
                  <div>
                    <span
                      class="fs-20 cr-blue familyD ml-20"
                      :style="{
                        color: item.color,
                      }"
                      >{{ item.value }}</span
                    >
                    <span class="fs-14 cr-hui4 ml-4">%</span>
                  </div>
                </div>
              </div>
              <div class="data-end-right">
                <div
                  class="flex-common mb-10 status"
                  v-for="item in scaleData.slice(3, 6)"
                  :key="item.name"
                >
                  <div class="flex-start">
                    <div
                      class="spotBig"
                      :style="{
                        'background-color': item.bg,
                      }"
                    >
                      <div
                        :class="`spot`"
                        :style="{
                          'background-color': item.color,
                        }"
                      ></div>
                    </div>
                    <span class="fs-12 cr-hui3 ml-4">{{ item.name }}</span>
                  </div>
                  <div>
                    <span
                      class="fs-20 cr-blue familyD ml-20"
                      :style="{
                        color: item.color,
                      }"
                      >{{ item.value }}</span
                    >
                    <span class="fs-14 cr-hui4 ml-4">%</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="child flex1 mr-24">
              <charts :option="areacharge" />
            </div>
          </div>
        </div>
        <div class="item2">
          <div class="title mb-24">定期维护</div>
          <div class="item2child">
            <div class="child1 flex1 mr-24 ml-24">
              <charts :option="maintwoChart" />
            </div>
            <div class="child1 flex1 mr-24">
              <div class="box1twotitle bold fs-16" style="color: #5f717d">
                事件区域分布
              </div>
              <div class="flex box1twoechart">
                <div class="center_chart">
                  <div id="Gas"></div>
                </div>
                <div class="end-right">
                  <div
                    class="flex-around mb-30"
                    v-for="(item, index) in chart3d"
                    :key="item.name"
                  >
                    <div class="flex-start">
                      <div :class="`spot${index}`"></div>
                      <span class="fs-12 cr-hui3">{{ item.name }}</span>
                    </div>
                    <div>
                      <span
                        class="fs-20 familyD"
                        :style="{ color: item.color }"
                        >{{ item.y }}</span
                      >
                      <span class="fs-14 cr-hui4 ml-12">%</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroll>
    </div>
  </div>
</template>

<script>
export default {
  name: "maintainStatistics",
  components: {
    statisticsTableHeader: () => import("../statisticsTableHeader"),
    echartData: () => import("../../home/children/echartData"),
  },
  data() {
    return {
      areacharge: {},
      mainChart: {},
      maintwoChart: {},
      sum: 180,
      wasteTypewuran: {},
      complete: {
        分光光度计: 50,
        液相色谱: 30,
        氧化钙: 10,
      },
      scaleData: [
        {
          name: "1楼",
          value: 28,
          color: "#00C0E4",
          bg: "#B8EBF7",
        },
        {
          name: "2 楼",
          value: 25,
          color: "#00D3A5",
          bg: "#BAF1E3",
        },
        {
          name: "3 楼",
          value: 19,
          color: "#FC965E",
          bg: "#FEDCCA",
        },
        {
          name: "4 楼",
          value: 14,
          color: "#F9708B",
          bg: "#FED2DB",
        },
        {
          name: "5 楼",
          value: 19,
          color: "#9477FF",
          bg: "#B8F1E2",
        },
        {
          name: "6 楼",
          value: 14,
          color: "#5699FF",
          bg: "#CBDDFF",
        },
      ],
      chart3d: [
        {
          name: "耗材更换",
          y: 40,
          color: "#00D4B9",
        },
        {
          name: "常规检查",
          y: 30,
          color: "#FC965E",
        },
        {
          name: "更改零件",
          y: 20,
          color: "#00C7EB",
        },
      ],
    };
  },
  mounted() {
    this.initareacharge(this.complete);
    this.get3dChart();
    this.initEvent();
    this.inittwoEvent();
    this.ititDevice();
  },
  methods: {
    /* 设备统计状态 */
    ititDevice() {
      var that = this;
      let data = [];
      for (var i = 0; i < this.scaleData.length; i++) {
        if (this.scaleData[i].value > 0) {
          data.push(
            {
              value: this.scaleData[i].value,
              name: this.scaleData[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  shadowBlur: 8,
                  borderColor: this.scaleData[i].color,
                  shadowColor: this.scaleData[i].bg,
                },
              },
              label: {
                show: false,
                color: this.scaleData[i].color,
              },
              labelLine: {
                length: 60,
                show: false,
                lineStyle: {
                  color: this.scaleData[i].color,
                },
              },
            },
            {
              value:
                this.scaleData.length > 1 &&
                this.sum !== this.scaleData[i].value
                  ? 8
                  : 0,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 10,
                },
              },
            }
          );
        }
        if (this.scaleData.length - 1 === i) {
          this.wasteTypewuran = {
            tooltip: {
              show: false,
            },
            legend: {
              show: false,
            },
            toolbox: {
              show: false,
            },
            series: [
              {
                name: "",
                type: "pie",
                clockWise: false,
                radius: [88, 90],
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: "outside",
                      formatter: function (params) {
                        var percent = 0;
                        percent =
                          ((params.value.toFixed(0) / that.sum) * 100).toFixed(
                            0
                          ) + "%";
                        if (params.name !== "") {
                          return percent;
                        } else {
                          return "";
                        }
                      },
                      rich: {
                        white: {
                          color: "#ddd",
                          align: "center",
                          padding: [3, 0],
                        },
                      },
                    },
                  },
                },
                data: data,
              },
            ],
          };
        }
      }
    },
    // 事件类型分布
    initEvent() {
      this.mainChart = {
        title: {
          text: "维修次数变化趋势",
          textStyle: {
            color: "#5F717D",
            fontSize: 16,
          },
          top: 20,
          left: "center",
        },
        grid: {
          top: "60",
          bottom: "14%",
          left: "14%",
          right: "2%",
        },
        xAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月", "六月"],
          minInterval: 2,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#5F717D",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FF9C66",
            },
          },
          nameTextStyle: {
            color: "#5F717D",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#B5C4D0",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#5F717D",
            },
          },
          name: "次数 / 次",
          nameTextStyle: {
            color: "#B5C4D0",
            verticalAlign: "bottom",
            align: "right",
          },
          splitLine: {
            lineStyle: {
              color: "#e5e5e5",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [80, 56, 46, 70, 70, 74],
            type: "bar",
            barWidth: 32,
            itemStyle: {
              barBorderRadius: [0],
              color: "#FF9C66",
            },
            label: {
              show: true,
              position: "top",
              position: "top",
              color: "#FF9C66",
            },
          },
        ],
      };
    },
    // 事件类型分布
    inittwoEvent() {
      this.maintwoChart = {
        title: {
          text: "维修次数变化趋势",
          textStyle: {
            color: "#5F717D",
            fontSize: 16,
          },
          top: 20,
          left: "center",
        },
        grid: {
          top: "60",
          bottom: "14%",
          left: "14%",
          right: "2%",
        },
        xAxis: {
          type: "category",
          data: ["一月", "二月", "三月", "四月", "五月", "六月"],
          minInterval: 2,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#5F717D",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#FF9C66",
            },
          },
          nameTextStyle: {
            color: "#5F717D",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#B5C4D0",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#5F717D",
            },
          },
          name: "次数 / 次",
          nameTextStyle: {
            color: "#B5C4D0",
            verticalAlign: "bottom",
            align: "right",
          },
          splitLine: {
            lineStyle: {
              color: "#e5e5e5",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            data: [80, 56, 46, 70, 70, 74],
            type: "bar",
            barWidth: 32,
            itemStyle: {
              barBorderRadius: [0],
              color: "#FF9C66",
            },
            label: {
              show: true,
              position: "top",
              position: "top",
              color: "#FF9C66",
            },
          },
        ],
      };
    },
    /* 设备类型分布 */
    initareacharge(data) {
      if (Object.values(data).length > 0) {
        this.areacharge = {
          grid: {
            top: "50",
            left: "16%",
            right: "10%",
            bottom: "30",
          },

          title: {
            text: "故障设备类型分布",
            textStyle: {
              color: "#5F717D",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },
          xAxis: {
            axisLabel: {
              show: true,
              interval: "auto",
              formatter: "{value} %",
            },
            data: Object.values(data),
            minInterval: 2,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#5F717D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",
            nameTextStyle: {
              color: "#8B9AA7",
            },
          },
          textStyle: {
            color: "#8B9AA7",
          },
          yAxis: {
            name: "重量 / kg",
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#00BFB1",
              },
            },

            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                position: "right",
                color: "#00BFB1",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
                color: "#00BFB1",
                normal: {
                  label: {
                    color: "#00BFB1",
                    show: true,
                    position: "right",
                    formatter: "{c}%",
                  },
                  color: "#00BFB1",
                },
              },
              data: Object.values(data),
              type: "bar",
            },
          ],
        };
      }
    },
    getInitDataImte(data) {
      let arr = [];
      Object.values(data).forEach((item) => {
        arr.push({
          value: item + "%",
        });
      });
      return arr;
    },
    /* 3d图表 */
    get3dChart(data = this.chart3d) {
      const Highcharts = require("highcharts");
      require("highcharts/modules/exporting")(Highcharts);
      require("@/assets/js/highcharts-3d.js")(Highcharts);
      Highcharts.chart("Gas", {
        legend: {
          enabled: false,
        },
        chart: {
          type: "pie",
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 60,
          },
        },
        colors: ["#00D4B9", "#F7A515", "#5699FF", "#FF7D7D"],
        plotOptions: {
          pie: {
            innerSize: 80,
            depth: 20,
            slicedOffset: 30,
            dataLabels: {
              enabled: false,
            },
          },
        },
        series: [
          {
            center: [140, 50],
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.maintain {
  height: 100%;
  padding: 0px 24px;
  .echarts {
    height: 82%;
    .econtent {
      height: 98% !important;
      width: inherit !important;
      .item1 {
        // height: 48%;
        height: 444px;
        background: #f7f8fc;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 24px;
        box-sizing: border-box;
        .title {
          color: #243859;
          font-size: 20px;
          padding-top: 24px;
          margin-bottom: 24px;
          align-items: center;
          flex-shrink: 1;
          display: flex;
          justify-items: center;
        }
        .item1child {
          height: 100%;
          display: flex;
          align-items: center;
          width: 100%;
          .child {
            width: 30%;
            background: #ffffff;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .childTitle {
              padding-top: 20px;
              font-weight: bold;
              display: flex;
              justify-items: center;
              align-items: center;
            }
            .center_chart {
              position: relative;
              width: 60%;
              height: 100%;
            }
            .sum {
              width: 165px;
              height: 40px;
              background: #eff0f2;
              border-radius: 4px;
            }
            .data-end-right {
              display: flex;
              box-sizing: border-box;
              justify-content: space-between;
              width: 100%;
              padding: 0px 24px;
              .spot {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 1;
                width: 12px;
                height: 12px;
                margin-right: 12px;
              }
            }
          }
        }
      }
      .item2 {
        // height: 48%;
        height: 444px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 24px;
        box-sizing: border-box;
        background: #f7f8fc;
        .title {
          // padding-top: 24px;
          // margin-bottom: 24px;
          color: #243859;
          font-size: 20px;
          align-items: center;
          flex-shrink: 1;
          display: flex;
          justify-items: center;
        }
        .item2child {
          height: 100%;
          display: flex;
          align-items: center;
          width: 100%;

          .child1 {
            width: 48% !important;
            height: 100%;
            background: #ffffff !important;
            .box1twoechart {
              height: 80%;
            }
            .box1twotitle {
              height: 44px;
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
            }
            width: 100%;
            background: #f7f8fc;
            .center_chart {
              width: 60%;
              height: 100%;
              position: relative;
              background: url("~@/assets/images/admin/3Dchart_bg3.png")
                no-repeat;
              background-position: 44% 50%;
              background-size: 50% 40%;
              #Gas {
                height: 100%;
              }
            }
            .end-right {
              width: 40%;
              padding-right: 38px;
              box-sizing: border-box;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;

              .spot {
                width: 8px;
                height: 8px;
                border: 3px solid;
                margin-right: 12px;
              }
              .spot0 {
                @extend .spot;
                background-color: #00d4b9;
                border-color: #bbf2e9;
              }
              .spot1 {
                @extend .spot;
                background-color: #fc965e;
                border-color: #fedcca;
              }
              .spot2 {
                @extend .spot;
                background-color: #13CBEC;
                border-color: #B0ECF8;
              }
            }
          }
        }
      }
      .boxright {
        margin-right: 3%;
      }
      .boxbottom {
        margin-bottom: 2%;
      }
    }
  }
}
</style>
<style>
.highcharts-exporting-group,
.highcharts-credits,
.highcharts-title {
  display: none;
}
</style>